import React from 'react'
import PropTypes from 'prop-types'
import styles from './ScrollLoader.less'
import {toEmotion} from 'utils'

export default class ScrollLoader extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      topLoading: false,
      bottonLoading: false,
      stopTopLoading: false, //是否停止传播滚动到顶部事件
      stopBottonLoading: false,  //是否停止传播滚动到底部事件
    }
  }

  static propTypes = {
    minHeight: PropTypes.number,
  }

  static defaultProps = {
    minHeight: 800,
  }

  realMinHeight () {
    return this.state.minHeight + 30
  }

  render () {
    const {scrollToTop, scrollToBotton, dataArray, ownerAvatarUrl, contactAvatarUrl} = this.props
    const {bottonLoading, topLoading, stopBottonLoading, stopTopLoading} = this.state

    const topDone = (stopTopLoading) => {
      this.setState({topLoading: false})
      if (stopTopLoading)
        this.setState({stopTopLoading: true})
    }

    const bottonDone = (stopBottonLoading) => {
      this.setState({bottonLoading: false})
      if (stopBottonLoading)
        this.setState({stopBottonLoading: true})
    }

    const onScroll = () => {
      const scrollContainer = document.getElementById('scrollLoader-container')

      if (scrollContainer.scrollTop <= 0 && !stopTopLoading) {
        if (topLoading) return

        this.setState({topLoading: true})
        // $emit(scrollToTop, topDone)
      }
      if ((scrollContainer.offsetHeight + scrollContainer.scrollTop + 1 >= scrollContainer.scrollHeight) && !stopBottonLoading) {
        if (bottonLoading) return

        this.setState({bottonLoading: true})
        scrollContainer.scrollTop += 40
        // $emit('scroll-to-botton', bottonDone)
      }
    }

    const getMsgContent = (message) => {
      if (message.type === 1) {
        return (
          <div className={styles.text} dangerouslySetInnerHTML={{__html: toEmotion(message.content)}}/>
        )
      } else if (message.type === 2) {
        return (
          <div className={styles.text}>
            <img src={message.content} className={styles.image} alt="聊天图片"/>
          </div>
        )
      } else if (message.type !== 10000) {
        return (
          <div className={styles.text}>
            {'[暂未支持的消息类型:' + message.type + ']\n\r' + message.content}
          </div>
        )
      }
    }

    const getMsgCard = (message) => {
      if (message.type === 10000) {
        return (<p className={[styles.time, styles.system]}><span>{message.content}</span></p>)
      } else {
        return (
          <div className={message.direction === 2 ? styles.self : ''}>
            <img className={styles.avatar} width="45" height="45"
                 src={message.direction === 2 ? ownerAvatarUrl : contactAvatarUrl}/>
            {getMsgContent(message)}
          </div>
        )
      }
    }

    return (
      <div id="scrollLoader-container" onScroll={() => {alert(1)}}>
        {
          topLoading &&
          <div className={styles.loading}>
            <div className={styles.loader}>加载中...</div>
          </div>
        }

        <div style={{minHeight: this.realMinHeight() + 'px', overflowX: 'hidden'}}>
          <div className={styles.message}>
            <ul style={{padding: 0}}>
              {dataArray.map((message, index) => (
                <li key={message.id}
                  // className={styles[message.direction === 2 ? 'an-move-right' : 'an-move-left']}>
                    className={styles[message.direction === 2 ? 'an-move-right' : 'an-move-left']}>
                  <p className={styles.time}><span>{message.ctime}</span></p>
                  {getMsgCard(message, index)}
                </li>
              ))}
            </ul>
          </div>
        </div>

        {
          bottonLoading &&
          <div className={styles.loading}>
            <div className={styles.loader}>加载中...</div>
          </div>
        }
      </div>
    )
  }
}
